<script src="jquery-2.0.3.min.js"></script>
    <script src="./jquery/jquery-2.0.3.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>
<script type="text/javascript">
var per = [ 
      {xh:'2',ddbh:'123456',spbh:'akmall',spmc:'测试信息',sptc:'测试信息',ksxl:'测试信息',xm:'测试信息',sj:'测试信息',yx:'测试信息',dz:'测试信息',zffs:'测试信息',kd:'顺丰快递',bz:'暂无',jg:'1/100',rq:'测试信息'}, 
      {xh:'3',ddbh:'123456',spbh:'akmall',spmc:'测试信息',sptc:'测试信息',ksxl:'测试信息',xm:'测试信息',sj:'测试信息',yx:'测试信息',dz:'测试信息',zffs:'测试信息',kd:'顺丰快递',bz:'暂无',jg:'2/100',rq:'测试信息'}, 
      ];  
 window.onload = function(){ 
   var tbody = document.getElementById('table'); 
   for(var i = 0;i < per.length; i++){ //遍历一下json数据 
     var trow = getDataRow(per[i]); //定义一个方法,返回tr数据 
     tbody.appendChild(trow); 
    } 
   } 
 function getDataRow(h){ 
   var row = document.createElement('tr'); //创建行 
   
   var idCell = document.createElement('td');
   idCell.innerHTML='<input type="checkbox" id="item" name="item"  ></input>';
   row.appendChild(idCell);
   var xhdiv = document.createElement('div');//创建第一列id 
   xhdiv.innerHTML = "ID:"+h.xh+""; //填充数据
   idCell.appendChild(xhdiv);
   var iddiv = document.createElement('div');
   iddiv.innerHTML=h.ddbh; //加入行 ，下面类似 
   idCell.appendChild(iddiv);
   

   var sp = document.createElement('td');//创建第二列name 
   sp.innerHTML = "【商品编号】"+h.spbh+""; 
   row.appendChild(sp); 
   var spmcdiv = document.createElement('div');
   spmcdiv.innerHTML="【商品名称】"+h.spmc+""; //加入行 ，下面类似 
   sp.appendChild(spmcdiv);
   var sptcdiv = document.createElement('div');
   sptcdiv.innerHTML="【商品套餐】"+h.sptc+""; //加入行 ，下面类似 
   sp.appendChild(sptcdiv);
   var ksxldiv = document.createElement('div');
   ksxldiv.innerHTML="【款式类别】"+h.ksxl+""; //加入行 ，下面类似 
   sp.appendChild(ksxldiv);
   

   
   var khxx = document.createElement('td');//创建第三列job 
   khxx.innerHTML = "【姓名】"+h.xm+""; 
   row.appendChild(khxx);
   var sjdiv = document.createElement('div');
   sjdiv.innerHTML="【手机】"+h.sj+""; //加入行 ，下面类似 
   khxx.appendChild(sjdiv);
   var yxdiv = document.createElement('div');
   yxdiv.innerHTML="【邮箱】"+h.yx+""; //加入行 ，下面类似 
   khxx.appendChild(yxdiv);
   var dzdiv = document.createElement('div');
   dzdiv.innerHTML="【地址】"+h.dz+""; //加入行 ，下面类似 
   khxx.appendChild(dzdiv);

   var zffs = document.createElement('td');//创建第三列job 
   zffs.innerHTML = h.zffs; 
   row.appendChild(zffs);

   var kd = document.createElement('td');//创建第三列job 
   kd.innerHTML = h.kd; 
   row.appendChild(kd);

   var jg = document.createElement('td');//创建第三列job 
   jg.innerHTML = h.jg; 
   row.appendChild(jg);

   var bz = document.createElement('td');//创建第三列job 
   bz.innerHTML = h.bz; 
   row.appendChild(bz);

   var rq = document.createElement('td');//创建第三列job 
   rq.innerHTML = h.rq; 
   row.appendChild(rq);

   var xg =document.createElement('td');
   xg.innerHTML='<a href="#" onclick="changeContent()">修改</a>';
   row.appendChild(xg);
   
 
   return row; //返回tr数据   
   } 
   function changeContent()
{
var b=window.prompt("请输入要修改的行数");
        //b--;
var a=window.prompt("请输入要修改的列数");
        a--;      
var tb = document.getElementById('table');//获取表格的dom节点
var td = tb.rows[b].cells[a];//获取0行0列的td单元格
td.innerHTML ="<input type='text' onblur=blur1(this,"+b+","+a+") type='text'  style='width:64px'  />";
}

function blur1(obj,i,a){
    document.getElementById("table").rows[i].cells[a].innerText=obj.value;
}


function checkAll() {
            var currentCheckNode = event.srcElement;
            var checkAllNodes = document.getElementsByName("item");
            //把没有点击的全选复选框去除复选
            for (var i = 0; i < checkAllNodes.length; i++) {
                if (currentCheckNode != checkAllNodes[i]) {
                    checkAllNodes[i].checked = false;
                }
            }
            var checkItemNodes = document.getElementsByName("item");
            for (var i = 0; i < checkItemNodes.length; i++) {
                checkItemNodes[i].checked = currentCheckNode.checked;
            }
        }

function btnCheckboxSel(index) {
            var checkItemNodes = document.getElementsByName("item");
            for (var i = 0; i < checkItemNodes.length; i++) {
                if (index == 2) {
                    checkItemNodes[i].checked = !checkItemNodes[i].checked;
                }
                else {
                    checkItemNodes[i].checked = index;
                }
            }
        }
function btnDelSelectRow() {

            var arrDel = new Array();
            var pos = 0;
            var itemNodes = document.getElementsByName("item");
            for (var i = 0; i < itemNodes.length; i++) {
                if (itemNodes[i].checked) {
                    arrDel[pos] = itemNodes[i].parentNode.parentNode.parentNode.removeChild(itemNodes[i].parentNode.parentNode);
                    pos++;
                }
            }

            if (pos <= 0) {
                return;
            }

            if (!window.confirm("是否要删除选择的数据?"))
                return;

            var tblMain = document.getElementById("table");
            for (var i = 0; i < arrDel.length; i++) {
                tblMain.tBodies[0].removeChild(arrDel[i]);
            }
        }




    </script>


<body>
<table id="table"  name="table" class="table table-striped">
	<colgroup>
<col style="width:10%">
<col style="width:23%">
<col style="width:23%">
<col style="width:7%">
<col style="width:9%">
<col style="width:7%">
<col style="width:7%">
<col style="width:7%">
<col style="width:7%">
   </colgroup>
   <thead>              
<tr>              
<th><input type="checkbox" id="item" name="item" onclick="checkAll()"  ></input>ID/订单编号</th>              
<th>订单信息</th>              
<th>客户信息</th>              
<th>数量价格</th>
<th>支付方式状态</th>
<th>快递</th>
<th>备注</th>
<th>时间</th>
<th>操作</th>              
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="item"  name="item"  ></input>ID:1<br>18012345678910</td>
<td>【商品编号】<span id="bh">akmall</span><br>【商品名称】<span id="mc">男士太阳镜女偏光镜-演示产品</span><br>【商品套餐】<span id="tc" >白框银镜</span><br>【款式系列】<span id="xl">儿童</span></td>
<td>【姓名】<span id="xm">fs</span><br>【手机】<span id="sj">ffd</span><br>【邮箱】<span id="yx">dfdsf@mail.com</span><br>【地址】<span id="dz">臺灣 基隆市 仁愛區 ffds</span></td>
<td><span id="sl">1</span>/<span id="jg">100.00</span></td>
<td>货到付款<br>待支付</td>
<td><span id="kd">顺丰快递</span></td>
<td><span id="bz">暂无</span></td>
<td><span id="rq">18-06-11 20：50</span></td>
<td><a onclick="changeContent()" href='#'>修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" id="item"  name="item"  ></input>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td><a onclick="changeContent()" href='#'>修改</a>
</td>
</tr>          
</tbody>
</table>
<div class="float-left">
<input type="hidden" name="model" value="Order">
<input type="checkbox"  onclick="btnCheckboxSel(2)" >选择/反选 
<input type="button" name="" value="批量删除" id="" onclick="btnDelSelectRow()">
<input type="hidden" name="" value="1">
</div>


</body>
